<template>
    <div class="content">



        <el-button type="primary" style="width: 120px; height: 30px; margin-left: 6px; margin-top: 8px;"
            @click="clickAdd">添加规则</el-button>

        <div>
            <el-table border ref="multipleTable" :data="maxOuts" tooltip-effect="dark"
                style="width: 100%;margin-top: 20px; margin-left: 6px;" height="">
                <!-- <el-table-column type="selection" width="55" align="center">
                </el-table-column> -->

                <el-table-column label="规则名称" prop="name" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column label="说明" prop="note" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column label="状态" show-overflow-tooltip align="center">
                    <template scope="scope">
                        {{ scope.row.status == 0 ? '关闭' : '开启' }}
                    </template>
                </el-table-column>
                <el-table-column label="生效时间" prop="start_time" show-overflow-tooltip align="center">

                </el-table-column>
                <el-table-column label="失效时间" prop="end_time" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column label="操作员" prop="operator" show-overflow-tooltip align="center"></el-table-column>


                <el-table-column fixed="right" label="编辑" align="center" width="200px">
                    <template slot-scope="scope">
                        <el-button @click="bianJi(scope.row)" type="text" size="mini">编辑</el-button>
                        <el-button type="text" size="mini" style="color: red;" @click="deleteRow (scope.row)">删除</el-button>
                    </template>

                </el-table-column>
            </el-table>

        </div>


        <!-- 审核详情弹出框 -->
        <el-dialog title="添加模板" :visible.sync="addDialogVisible" width="40%">

            <div style="height: 800px; overflow: auto; display: flex; flex-direction: column; ">
                <div style="display: flex; align-items: center; ">
                    <div style="width: 100px; text-align: right;  margin-left: 20px;">*规则名称：</div>
                    <el-input placeholder="请输入规则名称" v-model="currentRow.name"
                        style="width: 320px; margin-left: 30px;"></el-input>
                </div>

                <div style="display: flex; margin-top: 20px; align-items: center; margin-left: 20px; ">
                    <div style="width: 100px; text-align: right;">*生效时间：</div>

                    <el-date-picker v-model="dataValue" type="daterange" align="right" unlink-panels range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" @change="dataChange"
                        value-format="yyyy-MM-dd HH:mm:ss" style="width: 320px; margin-left: 30px;">
                    </el-date-picker>

                </div>

                
                <div style="display: flex; margin-top: 20px; align-items: center; margin-left: 20px; ">
                    <div style="width: 100px; text-align: right;">订单金额>=</div> <el-input placeholder="输入金额"
                        style="width: 158px; margin-left: 7px; margin-left: 7px;" type="number" step="0.01"
                        v-model="currentRow.rule_money" />
                    <div style="margin-left: 7px;">元，立减</div> <el-input placeholder="输入金额"
                        style="width: 158px; margin-left: 7px;" type="number" step="0.01"
                        v-model="currentRow.reduce_money" />
                </div>

                <div style="display: flex; margin-top: 20px; align-items: center; margin-left: 20px;">
                    <div style="width: 100px; text-align: right;">*状态：</div>
                    <el-radio-group v-model="currentRow.status" style="display: flex; margin-left: 30px;">
                        <el-radio :label="1" class="test-label">开启</el-radio>
                        <el-radio :label="0" class="test-label">关闭</el-radio>
                    </el-radio-group>
                </div>


                <div style="display: flex; margin-top: 20px; align-items: center;  margin-left: 20px;">
                    <div style="width: 100px; text-align: right;">*规则说明：</div>
                    <el-input v-model="currentRow.note" placeholder="请输入备注" style="margin-left: 30px; width: 320px;"
                        type="textarea" :autosize="autosize"></el-input>

                </div>





                <div style="position: absolute; bottom: 20px; align-self: center;">
                    <el-button type="primary" @click="saveClick" v-if="isLook">保存</el-button>
                    <el-button type="primary" @click="xiuGai" v-else>修改</el-button>
                </div>

            </div>
        </el-dialog>


    </div>
</template>

<script>
import { del, get, post, put } from '@/utils/request'
import { url } from '@/utils/url'
export default {
    name: '',
    data() {
        return {
            isLook:true,
            page: 1,
            addDialogVisible: false,
            currentRow: {
                id:'',
                name: '',
                note: "",
                status: '',
                upDateTime: '',
                operator: '',
                start_time: '',
                end_time: '',
                rule_money: '',
                reduce_money: '',
            },
            dataValue: [],
            maxOuts: [
                {
                    name: '无敌双十一满减活动',
                    note: "活动时间：本次满减活动将于2023年5月1日至2023年5月31日进行。活动对象：本次活动仅适用于所有在本商城注册并符合活动参与条件的用户。活动范围：本次满减活动适用于本商城内所有符合条件的商品。活动规则：a. 用户在活动期间购买符合条件的商品，单笔订单总金额（以订单结算金额为准）达到特定金额，即可享受相应的满减优惠。b. 满减优惠不可与其他优惠活动同时使用，但可与商城积分、优惠券等优惠方式叠加使用。6. 活动解释权：本活动最终解释权归本商城所有。如有任何疑问或需要帮助，请联系我们的客服团队。感谢您的支持与参与",
                    status: '正常',
                    upDateTime: '2023-11/28 18:05',
                    operator: '快递员01',
                    start_time: '2023-10-01',
                    end_time: '2023-11-11',
                }
            ],

            templateAreas: [
                {
                    number: '1',
                    areaName: '北京市',
                    firstWeight: 11.11,
                    thenWeight: 1.00,

                }
            ],


        }
    },
    components: {

    },
    computed: {

    },
    mounted() {
        this.getMaxOutMessage()
    },
    methods: {

        //修改
        xiuGai() {
            put(url.fullMinus, {
                id:this.currentRow.id,
                type: 2,
                name: this.currentRow.name,
                rule_money: this.currentRow.rule_money,
                start_time: this.currentRow.start_time,
                end_time: this.currentRow.end_time,
                reduce_money: this.currentRow.reduce_money,
                status: this.currentRow.status,
                note: this.currentRow.note
            }).then(res => {
                console.log(JSON.stringify(res))
                this.getMaxOutMessage()
                this.addDialogVisible = false
            }).catch(error => {
                console.error(error);
            })
        },
        
        //删除活动
        deleteRow(row) {
            console.log("???delete执行")

            this.$alert('确定删除'+row.name+"吗", "温馨提示", {
                confirmButtonText: "确定",
                callback: action => {
                    if(action == 'cancel'){
                        console.log('点击取消了')
                        return
                    }
                    console.log('请求删除接口')
                    del(url.fullMinus, {
                        id: row.id,

                    }).then(res => {
                        console.log('请求成功')
                        this.addDialogVisible = false
                        this.$message(res.msg)
                        this.getMaxOutMessage()

                    }).catch(error => {
                        console.log('请求失败')
                    })
                }
            });

        },


        //点击编辑
        bianJi(row) {
            this.isLook =false;
            get(url.fullMinus, {
                id: row.id
            }).then(res => {
                this.currentRow =res.data
                this.dataValue[0] =res.data.start_time
                this.dataValue[1] =res.data.end_time
                this.addDialogVisible =true
            }).catch(error => {
                console.error(error);
            })
        },


        //日期更换事件
        dataChange(data) {
            this.currentRow.start_time = data[0],
            this.currentRow.end_time = data[1]
            console.log(JSON.stringify(data[0]))
            console.log(JSON.stringify(this.dataValue))
        },

        //保存
        saveClick() {
            post(url.fullMinus, {
                type: 2,
                name: this.currentRow.name,
                rule_money: this.currentRow.rule_money,
                start_time: this.currentRow.start_time,
                end_time: this.currentRow.end_time,
                reduce_money: this.currentRow.reduce_money,
                status: this.currentRow.status,
                note: this.currentRow.note
            }).then(res => {
                console.log(JSON.stringify(res))
                this.getMaxOutMessage()
                this.addDialogVisible = false
            }).catch(error => {
                console.error(error);
            })
        },

        //点击添加
        clickAdd() {
            this.isLook =true
            this.currentRow ={}
            this.dataValue =[]
            this.addDialogVisible = !this.addDialogVisible
        },

        getMaxOutMessage() {
            get(url.fullMinuses, {
                page: this.page,
                per_page: 20,
                type: 2
            }).then(res => {
                this.maxOuts = res.data.data
            }).catch(error => {
                console.error(url.fullMinuses + error);
            })
        }
    },
}
</script>

<style scoped>
.content {
    overflow: auto;
    background: white;
    flex-direction: column;
    width: 100%;
    border-radius: 5px;
    border: solid 6px #F5F5F5;



}
</style>
